<template>
  <div>
    <el-card style="width: 98%; height: 80vh" shadow="always">
      <div
        class="category-top"
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          line-height: 60px;
          border-bottom: 2px solid rgb(244, 245, 250);
        "
      >
        <h3>商品分类</h3>
        <el-button type="primary" @click="dialogFormVisible = true">添加分类</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="cateName" label="分类名称" width="380">
          <template #default="scope">
            <span v-show="!scope.row.isEditing">{{ scope.row.cateName }}</span>
            <el-input
              v-show="scope.row.isEditing"
              clearable
              v-model="scope.row.cateName"
              style="width: 240px"
              placeholder="分类名称"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="是否启用" width="480">
          <template #default="scope">
            <el-switch
              :disabled="!scope.row.isEditing"
              v-model="scope.row.state"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-button v-show="!scope.row.isEditing" @click="startEdit(scope.row)">编辑</el-button>
            <el-button type="success" v-show="scope.row.isEditing" @click="finishEdit(scope.row)"
              >完成</el-button
            >
            <el-button type="danger" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[5, 10, 15]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>



    <el-dialog v-model="dialogFormVisible" title="添加商品分类" width="500">
    <el-form :model="form">
      <el-form-item label="分类名称" :label-width="formLabelWidth">
        <el-input v-model="form.cateName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="是否启用" :label-width="formLabelWidth">
        <el-switch
              v-model="form.state"
              :active-value="1"
              :inactive-value="0"
            />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="isAdd">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { fetchGoodsCatelist ,fetchGoodsEditCate ,fetchGoodsCateDel,fetchGoodsAddCate } from '../api/goods/index'
import { ElMessage, ElMessageBox, type ComponentSize } from 'element-plus'
import { fa } from 'element-plus/es/locales.mjs';
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const total = ref(0)

//编辑状态
// 开始编辑
const startEdit = (row) => {
  row.isEditing = true
}

// 完成编辑
const finishEdit = async(row) => {
  console.log(row);

  const data = {
    id:row.id,
    state:!!row.state,
    cateName:row.cateName
  }
  row.isEditing = false
  // 这里可以添加保存编辑结果的逻辑
  const res = await fetchGoodsEditCate(data)
  console.log("🚀 ~ finishEdit ~ res:", res)
}

//添加
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = ref({
  cateName:'',
  state:1
})
watch(form,()=>{
  console.log(form);

})
const isAdd = async()=>{
  const res = await fetchGoodsAddCate(form.value)
  console.log(res);
  handleSizeChange(pageSize4.value)
  dialogFormVisible.value = false
}
//删除
const handleDel = (row)=>{
  ElMessageBox.confirm('此操作将永久删除该条数据，是否继续?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const id = row.id
      //删除的逻辑
      // const res = await fetchGoodsDel({ id })
      const res = await fetchGoodsCateDel({ id })
      console.log("🚀 ~ .then ~ res:", res)
      handleSizeChange(pageSize4.value)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

const handleSizeChange = async (val: number) => {
  const res = await fetchGoodsCatelist({
    currentPage: 1,
    pageSize: val,
  })
  total.value = res.data.total
  tableData.value = res.data.data
}
const handleCurrentChange = async (val: number) => {
  const res = await fetchGoodsCatelist({
    currentPage: val,
    pageSize: pageSize4.value,
  })
  total.value = res.data.total
  tableData.value = res.data.data
}
const tableData = ref([])

onMounted(async () => {
  const res = await fetchGoodsCatelist({
    currentPage: 1,
    pageSize: pageSize4.value,
  })
  total.value = res.data.total
  tableData.value = res.data.data.map((item) => ({
    ...item,
    isEditing: false, // 为每行添加编辑状态
  }))
})
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
button {
  margin: 0;
}
</style>
